<!-- 关键词推荐 -->
<template>
  <div class="re-layout">
    <div class="flex header">
      <el-input v-model.trim="searchStr" size="small" placeholder="输入关键词推荐" class="input" @keyup.enter.native="handleSearch"></el-input>
      <el-button type="success" @click="handleSearch">搜索</el-button>
    </div>

    <el-table v-loading="loading" :data="copyData" height="400px">
      <el-table-column align="center" width="50">
        <!-- 表头 -->
        <template slot="header" slot-scope="scope">
          <div class="add-icon pointer" @click="addWord(copyData)">
            <i class="el-icon-plus"></i>
          </div>
        </template>
        <!-- 主体 -->
        <template slot-scope="scope">
          <div class="add-icon pointer" @click="addWord([scope.row])">
            <i class="el-icon-plus"></i>
          </div>
        </template>
      </el-table-column>

      <el-table-column align="left" prop="name" label="推荐">
        <template slot="header" slot-scope="scope">
          <div>推荐({{ copyData.length }})</div>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="address" label="流行度" width="80">
        <!-- 表头 -->
        <template slot-scope="scope">
          <div>{{ scope.row.popularity||'-' }}</div>
        </template>
      </el-table-column>
    </el-table>

    <div class="flex" style="justify-content: flex-end;padding-top: 20px;">
      <el-pagination
        :page-size="queryData.size"
        :current-page="queryData.page"
        layout="total, prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>

  </div>
</template>
<script>
import {
  getWordFromAppId,
  getRelevant
} from '@/api/keyWord.js'
export default {
  name: '', // ·������
  props: {
    appid: {
      type: Number || String
    },
    countryList: {
      type: String || Object
    }
  },
  data() {
    return {
      loading: false,
      searchStr: '',
      tableData: [],
      copyData: [],
      countrys: [],
      total: 0,
      queryData: {
        search: '',
        page: 1,
        size: 50
      }
    }
  },
  computed: {

  },
  watch: {
    /*   appid: { // �����Ķ���
                deep: true, // ���ȼ�������Ϊ true
                immediate: true,
                handler: function(newV, oldV) {
                  if (newV) {
                    this.getWordFromAppId()
                  } else {
                    return false
                  }
                }
              }, */
    countryList: { // �����Ķ���
      deep: true, // ���ȼ�������Ϊ true
      immediate: true,
      handler: function(newV, oldV) {
        if (newV) {
          this.countrys = newV
          this.getWordFromAppId()
        } else {
          return false
        }
      }
    }

  },
  // ������
  created() {},
  // ���غ�
  mounted() {

  },
  // ���ٺ�
  destroyed() {

  },

  // ����
  methods: {
    // 通过appid获取推荐词
    async getWordFromAppId() {
      this.searchStr = ''
      this.copyData = []
      this.tableData = []

      try {
        this.loading = true
        const res = await getWordFromAppId({
          page: this.queryData.page,
          size: this.queryData.size,
          appid: this.appid,
          type: this.$store.state.user.unit,
          countrys: this.countrys
        })
        this.loading = false

        if (res.data.code * 1 === 20000) {
          this.total = res.data.data.count
          this.tableData = res.data.data.list
          this.copyData = res.data.data.list
        } else {
          this.tableData = []
        }
      } catch (err) {
        this.total = 0
        this.loading = false
        this.tableData = []
      }
    },

    async handleSearch() {
      if (!this.searchStr) {
        return this.getWordFromAppId()
      }
      this.queryData.search = this.searchStr
      this.queryData.page = 1
      try {
        this.loading = true
        const res = await getRelevant({
          page: this.queryData.page,
          size: this.queryData.size,
          appid: this.appid,
          type: this.$store.state.user.unit,
          list: [this.queryData.search],
          countrys: this.countrys
        })
        this.loading = false
        if (res.data.code * 1 === 20000) {
          this.total = res.data.data.count
          this.tableData = res.data.data.list
          this.copyData = res.data.data.list
        } else {
          this.total = 0
          this.loading = false
          this.tableData = []
        }
      } catch (err) {
        this.tableData = []
      }
    },

    handleCurrentChange(current) {
      this.queryData.page = current
      this.handleSearch()
    },
    addWord(data) {
      if (data.length) {
        const arr = data.map(item => {
          return item.name
        })
        this.$emit('handleAdd', arr)
      } else {
        return false
      }
    }
  }
}
</script>

<style scoped lang="scss">
  @import "~@/styles/variables.scss";

  .re-layout {
    max-width: 396px;
    padding-right: 24px;
    margin-right: 24px;
    border-right: 1px solid #eee;

    .header {
      margin-bottom: 20px;
      justify-content: flex-start;

      .input {
        width: 280px;
        margin-right: 12px;
      }
    }

    ::v-deep .add-icon {
      height: 16px;
      width: 16px;
      color: #FFFFFF;
      background-color: $mainColor1;
      line-height: 16px;
      font-size: 14px;
      text-align: center;
    }
  }
</style>
